<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import { useStyle } from "../utils/useStyle";
    import type { GenericProps } from "./Skeleton";

    const props: GenericProps = $props();

    const size = props.size ?? "medium";
    const shape = props.shape ?? "circle";

    const classList = $derived(
        useClassList(props, "cm-skeleton-item", {
            [`cm-skeleton-${props.type}`]: props.type,
            [`cm-skeleton-${props.type}-${size}`]: size,
            [`cm-skeleton-${props.type}-${shape}`]: shape,
            [`cm-skeleton-inline`]: props.inline,
        })
    );

    const style = $derived(
        useStyle(props, {
            width: typeof props.size === "number" ? props.size + "px" : props.width,
            height: typeof props.size === "number" ? props.size + "px" : props.height,
        })
    );
</script>

<div class={classList} {style}></div>
